<template>
  <div class="pay-container">
    <!-- 顶部返回 + 标题 -->
<!--    <div class="header">-->
<!--      <div class="back-button">✖</div>-->
<!--      <div class="title">支付选择</div>-->
<!--    </div>-->
    <van-nav-bar
        title="服务人员详情"
        left-text=""
        left-arrow
        @click-left="onClickLeft"
    />

    <!-- 倒计时 -->
    <div class="countdown">支付剩余时间 {{ countdown }}</div>

    <!-- 标题 -->
    <div class="section-title">家员私厨</div>

    <div class="divider"></div>

    <!-- 支付类型 -->
    <div class="row">
      <div class="label">支付类型</div>
      <div class="value">尾款</div>
    </div>

    <!-- 支付形式 -->
    <div class="row">
      <div class="label">支付形式</div>
      <div class="value">一次支付</div>
    </div>

    <div class="divider"></div>

    <!-- 应收信息 -->
    <div class="row">
      <div class="label">本次应收</div>
      <div class="value">2700元</div>
    </div>

    <div class="row">
      <div class="label">本地定价</div>
      <div class="value">3000元</div>
    </div>

    <div class="divider"></div>

    <!-- 余额支付 -->
    <div class="balance-pay">
      余额支付<span class="amount">12000元</span>
    </div>

    <div class="divider large"></div>

    <!-- 支付方式 -->
    <div class="payment-option" @click="selected = 'alipay'">
      <img class="icon" src="@/assets/appimg/zhifubao.png" />
      <div class="label">支付宝</div>
      <div class="selector">
        <span v-if="selected === 'alipay'" class="checked">✔︎</span>
        <span v-else class="unchecked"></span>
      </div>
    </div>

    <div class="divider"></div>

    <div class="payment-option" @click="selected = 'wechat'">
      <img class="icon" src="@/assets/appimg/weixin.png" />
      <div class="label">微信支付</div>
      <div class="selector">
        <span v-if="selected === 'wechat'" class="checked">✔︎</span>
        <span v-else class="unchecked"></span>
      </div>
    </div>

    <div class="divider large"></div>

    <!-- 备注 -->
    <div class="note">备注</div>
    <textarea class="textarea" placeholder="请输入备注" rows="4"></textarea>

    <div class="divider"></div>

    <!-- 底部 -->
    <div class="footer">
      <div class="left-text">需支付 <span class="amount">¥9.9</span></div>
      <button class="pay-button">立即支付</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
//////////////////倒计时/////////////////////
const selected = ref('alipay')
const countdown = ref('03:00')

// 简单倒计时逻辑
let time = 180
const format = (s) => {
  const m = String(Math.floor(s / 60)).padStart(2, '0')
  const sec = String(s % 60).padStart(2, '0')
  return `${m}:${sec}`
}

onMounted(() => {
  const timer = setInterval(() => {
    if (time <= 0) return clearInterval(timer)
    time--
    countdown.value = format(time)
  }, 1000)
})
/////////////////////////////////
// const myChannel=window.MyChannel;
// console.log("myChannel=",myChannel)
function onClickLeft() {
  if (null==window.MyChannel){
    router.back()
  }else{
    var pagestr={
      type:1,
      data:"退出吧"
    }
    window.MyChannel.postMessage(JSON.stringify(pagestr));
  }

}
</script>

<style scoped>
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.pay-container {
  height: 100vh;
  width: 100vw;
  font-family: sans-serif;
  font-size: 14px;
  background-color: #fff;
  color: #000;
  box-sizing: border-box;
  padding-bottom: 60px; /* footer 高度 + 额外间距 */
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.back-button {
  font-size: 18px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 22px;
  cursor: pointer;
}

.title {
  font-size: 16px;
  font-weight: bold;
}

.countdown {
  margin: 10px 0;
  color: white;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding-top: 3px;
  padding-bottom: 3px;
  background: linear-gradient(to right,#ED9F75, #E8621A);
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  height: 50px;
  line-height: 50px;
  padding-left: 15px;
}

.divider {
  height: 1px;
  background-color: #e0e0e0;
  margin: 8px 0;
}

.divider.large {
  height: 8px;
  background-color: #f5f5f5;
}

.row {
  display: flex;
  justify-content: space-between;
  padding-left: 15px;
  padding-right: 15px;
  height: 35px;
}

.label {
  color: #000;

}
.value{
  color: #000;
  font-weight: bold;
}


.balance-pay {
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
  height: 50px;
}
.balance-pay .amount {
  color: red;
  font-weight: bold;
  font-size: 20px;
  padding-left: 5px;
}

.payment-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 15px;
  padding-right: 15px;
  height: 50px;
}

.payment-option .icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.payment-option .label {
  flex: 1;
  margin-left: 10px;
}

.selector {
  font-size: 16px;
}

.checked {
  width: 18px;
  height: 18px;
  display: inline-block;
  border: 1px solid red;
  border-radius: 50%;
  text-align: center;
  color: red;
  font-weight: bold;
  line-height: 16px;
}

.unchecked {
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  border-radius: 50%;
  display: inline-block;
}

.note {
  padding-left: 15px;
  height: 30px;
}

.textarea {
  box-sizing: border-box;
  width: calc(100% - 30px);
  height: 100px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: none;
  font-size: 14px;
  margin-right: 15px;
  margin-left: 15px;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 15px;
 position: fixed;
  bottom: 30px;
  left: 0;
  right: 0;

}

.left-text .amount {
  color: red;
  font-weight: bold;
  font-size: 25px;
}

.pay-button {
  width: 150px;
  background-color: red;
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  border: none;
  font-weight: bold;
  cursor: pointer;
}
</style>
